<h1>What is Trongate CSS?</h1>
<p>Trongate CSS is a lightweight CSS library designed to make plain HTML visually appealing with minimal effort. Unlike other CSS frameworks that require extensive usage of utility classes or component structures, Trongate CSS enhances standard HTML elements automatically, providing a seamless and elegant experience.</p>

<h2>Do We Really Need <i>Another</i> CSS Library?</h2>
<p>With the plethora of CSS libraries and frameworks available, it's natural to ask, "<b>do we <i>really</i> need Trongate CSS?</b>":</p>
<p>The answer is simple: <b>you don't have to use it.</b></p>
<p>Trongate CSS is entirely optional and works independently of the Trongate PHP framework. If you already have a CSS library or framework that suits your needs, you can continue using it alongside Trongate CSS - or not at all. The choice is yours.</p>
<p>While many CSS libraries are excellent, some come with significant challenges.  For instance:</p>
<ol>
  <li class="mt-3">
    <strong>Rewrite culture</strong>: Many of the world's most popular CSS frameworks are subjected to ruthless rewrite and reversioning schedules <b><i>with breaking changes</i></b>. Astonishingly, the makers of some of these <i>other</i> CSS frameworks appear to be proud of their ongoing endeavours to break their own intellectual assets. Rewrite culture is a huge problem across the CSS landscape and - sadly - it has <a href="https://www.yiiframework.com/extension/yiisoft/yii2-bootstrap4/doc/guide/2.0/en/migrating-yii2-bootstrap" target="_blank">ruined</a> many good PHP projects.
  </li>

  <li class="mt-3">
    <strong>Steep learning curves</strong>: Modern CSS frameworks often introduce a labyrinth of utility classes, configuration files, and dependencies. This forces developers to spend hours, if not days, poring over exhaustive documentation just to accomplish what should be straightforward tasks. For instance, creating a responsive layout might require mastery of grid systems, flex utilities, and component-based styling approaches. Instead of speeding up development, these frameworks can make it feel like you're taking a crash course in a new programming language.
  </li>

  <li class="mt-3">
    <strong>Bloated code</strong>: Many CSS frameworks bundle an overwhelming array of pre-built components, styles, and utilities, most of which are irrelevant to your project. This can lead to unnecessarily large CSS files, slowing down page load times and bloating your source code. Even worse, developers often include the entire framework rather than just the parts they need, adding kilobytes - or even megabytes - of unused styles to their projects. The result is wasted bandwidth and poorer performance for end users.
  </li>

  <li class="mt-3">
    <strong>Framework lock-in</strong>: Dependency on framework-specific classes often leads to a scenario known as "framework lock-in," where your entire project becomes tethered to the quirks and updates of a particular library. Over time, this can make migrating to another framework - or even updating to a new version of the same framework - a monumental task. Designs that once felt modern can become outdated overnight, requiring extensive rework to achieve compatibility. For developers, this can mean a choice between starting from scratch or enduring endless frustration.
  </li>
</ol>


<div class="alert alert-info">
  <p class="mt-0">Consider this simple HTML code:</p>
  [code=html]&amp;lt;button&amp;gt;Click Me&amp;lt;/button&amp;gt;[/code]
  <p>With most CSS frameworks, styling this button would require multiple classes:</p>
  [code]&amp;lt;button class="btn btn-primary px-4 py-2 rounded"&amp;gt;Click Me&amp;lt;/button&amp;gt;[/code]
  <p>With Trongate CSS, the basic HTML element is all you need - it's beautifully styled by default!</p>
</div>

<h2>Key Features</h2>
<ul>
  <li><strong>Zero-class styling</strong>: Automatically styles basic HTML elements.</li>
  <li><strong>Mobile-first design</strong>: Responsiveness without extra classes.</li>
  <li><strong>Lightweight</strong>: Small file size with no dependencies.</li>
  <li><strong>Modern defaults</strong>: Contemporary styling out of the box.</li>
  <li><strong>Framework agnostic</strong>: Compatible with any JavaScript framework or none at all.</li>
</ul>

<h2>How It's Different</h2>
<div class="alert alert-success">
  <ul>
    <li><strong>No classes required</strong>: Unlike Bootstrap or Tailwind, basic elements are styled without additional classes.</li>
    <li><strong>Minimal learning curve</strong>: Familiarity with HTML is all you need to get started.</li>
    <li><strong>Pure simplicity</strong>: Focus on content, not styling classes.</li>
    <li><strong>Fast development</strong>: Build professional web pages quickly and efficiently.</li>
  </ul>
</div>

<h3>Example: Form Styling Comparison</h3>
<p>Here's how Trongate CSS simplifies form development compared to other frameworks:</p>
[code=html]
&lt;!-- Traditional Framework --&gt;
&amp;lt;form class="form-container p-4 border rounded"&amp;gt;
    &amp;lt;div class="form-group mb-3"&amp;gt;
        &amp;lt;label class="form-label"&amp;gt;Name&amp;lt;/label&amp;gt;
        &amp;lt;input type="text" class="form-control"&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/form&amp;gt;

&lt;!-- Trongate CSS --&gt;
&amp;lt;form&amp;gt;
    &amp;lt;label&amp;gt;Name&amp;lt;/label&amp;gt;
    &amp;lt;input type="text"&amp;gt;
&amp;lt;/form&amp;gt;
[/code]

<h2>Conclusion</h2>
<p>Think of Trongate CSS as being a patch (or, if you prefer, a <i>fix</i>) for <b>pure HTML</b>.</p>
<p>Here's three huge benefits that Trongate CSS brings to the table:</p>
<ol>
  <li>There's not much to learn!  Trongate CSS makes pure HTML look beautiful.</li>
  <li>Trongate CSS encourages developers to write <b>pure HTML</b> - thereby giving projects massive degrees of stability.</li>
  <li>Since Trongate CSS is very lightweight and produces beautiful source code, it makes websites built with Trongate CSS very attractive to search engines like Google.</li>
</ol>
